<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>浮动</title>
        <style>
            div{
                margin:5px 5px;
                padding:10px;
                background-color: #eafc8f;
                border:1px solid red;
            }
            #box1{width:100px;float:left;}
            #box2{width:200px;float:right;}
            #box3{line-height: 160%;clear: both;}
        </style>
    </head>
    <body>
        <div id="box1">块元素1</div>
        <div id="box2">块元素2</div>
        <div id="box3">
            属性定义元素在哪个方向浮动。以往这个属性总应用与图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素
        </div>
    </body>
</html>